<template>
  <div class="mbody">
    <el-form ref="formRef" :model="UserInfo " label-width="86px" class="profile-form">
      <h3 class="title">个人信息</h3>
      <el-form-item label="用户名">
        <el-input v-model="UserInfo.username" placeholder="请输入用户名" prefix-icon="user"></el-input>
      </el-form-item>
      <el-form-item label="头像">
        <el-input v-model="userinfo_rsp.image" placeholder="请输入头像" prefix-icon="message"></el-input>
      </el-form-item>
      <el-form-item label="简介">
        <el-input v-model="userinfo_rsp.bio" placeholder="请输入简介" prefix-icon="user"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="UserInfo.email" placeholder="请输入邮箱" prefix-icon="user"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="UserInfo.password" placeholder="请输入密码" type="password" prefix-icon="user"></el-input>
      </el-form-item>
      <el-form-item label>
        <el-button type="primary" class="w100p" @click="setting">修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
 import { ref } from 'vue';
  import axios from "@/utils/request"
import {User, User_Info} from '@/types'
import { useUserStore } from '@/store/user'
import router from '@/router'
import {set} from "@/utils/storage"
import { storeToRefs } from 'pinia';



const userStore = useUserStore();
 storeToRefs(userStore);
const { setUser } = userStore;


const UserInfo = ref<User>({
  "username": "",
    "email": "",
    "password": ""
})


const userinfo_rsp = ref<User_Info>({
  "id": 0, 
"email": "", 
"username": "",
 "bio": '',
  "image": "",
  "token":"" 
})


const setting = function () {
  axios.put('/users',{
  "user":UserInfo.value
}).then(res=>{
  userinfo_rsp.value = res.data.user
// 调setUser
  setUser(userinfo_rsp.value)
  // token存入key中
  set('user_token',userinfo_rsp.value.token)
  router.push({name:'个人设置'})
  console.log(res.data)
})
}

</script>
<style  scoped>
.mbody {
  width: 60%;
  margin-right: auto;
  padding-left: 200px;
  padding-top: 20px;
}
</style>